<template>

  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">


      <el-tab-pane label="基础信息" name="baseInfo">

        <el-divider content-position="left">基础信息</el-divider>

        <!--      人员基础信息-->

        <el-descriptions :column="descriptionsColumn" >
          <el-descriptions-item label="头像" >
<!--            <el-avatar :size="50" :src="imagesHead"></el-avatar>-->
            <el-image
              style="width: 100px; height: 100px; float: left;"
              :src="imagesHead"
              fit="fill"></el-image>

          </el-descriptions-item>
          <el-descriptions-item label="姓名">{{rowData.xm}}</el-descriptions-item>
          <el-descriptions-item label="身份证号码">{{rowData.sfzhm}}</el-descriptions-item>
          <el-descriptions-item label="身份证唯一标识码">{{rowData.sfzid}}</el-descriptions-item>
          <el-descriptions-item label="人员状态">
            <el-tag
              size="mini"
              :type="this.ryztTransformationTag(rowData.ryzt)"
              disable-transitions>{{this.ryztTransformationChina(rowData.ryzt)}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            <el-tag
              size="mini"
              :type="this.sexTransformationTag(rowData.xb)"
              disable-transitions>{{this.sexTransformationChina(rowData.xb)}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="父亲姓名">{{rowData.fqxm}}</el-descriptions-item>
          <el-descriptions-item label="父亲身份证">{{rowData.fqsfz}}</el-descriptions-item>
          <el-descriptions-item label="母亲姓名">{{rowData.mqxm}}</el-descriptions-item>
          <el-descriptions-item label="母亲身份证">{{rowData.mqsfz}}</el-descriptions-item>
          <el-descriptions-item label="配偶姓名">{{rowData.poxm}}</el-descriptions-item>
          <el-descriptions-item label="配偶身份证">{{rowData.posfz}}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{rowData.lxdh}}</el-descriptions-item>
          <el-descriptions-item label="国籍">{{rowData.gj}}</el-descriptions-item>
          <el-descriptions-item label="籍贯-省">{{rowData.province}}</el-descriptions-item>
          <el-descriptions-item label="籍贯-市">{{rowData.city}}</el-descriptions-item>
          <el-descriptions-item label="籍贯-区/县">{{rowData.area}}</el-descriptions-item>
          <el-descriptions-item label="出生日期">{{rowData.csrq}}</el-descriptions-item>
          <el-descriptions-item label="实际出生日期">{{rowData.sjcsrq}}</el-descriptions-item>
          <el-descriptions-item label="户籍所在地">{{rowData.hjdz}}</el-descriptions-item>
          <el-descriptions-item label="人员所在地详细地址">{{rowData.szdxq}}</el-descriptions-item>
          <el-descriptions-item label="人员所在地国家">{{rowData.szdgj}}</el-descriptions-item>
          <el-descriptions-item label="人员所在地省">{{rowData.szdprovince}}</el-descriptions-item>
          <el-descriptions-item label="人员所在地市">{{rowData.szdcity}}</el-descriptions-item>
          <el-descriptions-item label="人员所在地区县">{{rowData.szdarea}}</el-descriptions-item>
          <el-descriptions-item label="人员所在地街道">{{rowData.szdjd}}</el-descriptions-item>
          <el-descriptions-item label="人员所在地居委会">{{rowData.szdjwh}}</el-descriptions-item>
          <el-descriptions-item label="身高">{{rowData.sg}} cm</el-descriptions-item>
          <el-descriptions-item label="体重">{{rowData.tz}} kg</el-descriptions-item>
          <el-descriptions-item label="人种">{{rowData.rz}}</el-descriptions-item>
          <el-descriptions-item label="民族">{{rowData.mz}}</el-descriptions-item>
          <el-descriptions-item label="政治面貌">{{rowData.zzmmzw}}</el-descriptions-item>
          <el-descriptions-item label="职业">{{rowData.zy}}</el-descriptions-item>
          <el-descriptions-item label="行业">{{rowData.sshymc}}</el-descriptions-item>
          <el-descriptions-item label="户口类型">
            <el-tag
              size="mini"
              :type="this.hklxTransformationTag(rowData.hklx)"
              disable-transitions>{{this.hklxTransformationChina(rowData.hklx)}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="技能">{{rowData.jn}}</el-descriptions-item>
          <el-descriptions-item label="宗教信仰">{{rowData.zjxy}}</el-descriptions-item>
          <el-descriptions-item label="综合评价" span=2>{{rowData.zhpj}}</el-descriptions-item>
          <el-descriptions-item label="备注" span=2>{{rowData.bz}}</el-descriptions-item>
        </el-descriptions>

      </el-tab-pane>


<!--      <el-tab-pane label="证件信息" name="certificateInfo">-->
<!--        <el-table-->
<!--          :data="tableCertificatesData"-->
<!--          max-height="400"-->
<!--          height="400"-->
<!--          :key="Math.random()"-->
<!--          style="width: 100%">-->

<!--          <el-table-column-->
<!--            prop="mc"-->
<!--            label="证件名称"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="hm"-->
<!--            label="证件号码"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="yxqks"-->
<!--            label="有效期开始"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="yxqjs"-->
<!--            label="有效期结束"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="bfsj"-->
<!--            label="证件颁发时间"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="sfyx"-->
<!--            label="是否有效"-->
<!--            width="120">-->
<!--            <template slot-scope="scope">-->
<!--              <el-tag size="mini" :type="zjyxTag(scope.row.sfyx)" disable-transitions>-->
<!--                {{zjyxChina(scope.row.sfyx)}}-->
<!--              </el-tag>-->
<!--            </template>-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            label="操作"-->
<!--            width="100">-->
<!--            <template slot-scope="scope">-->
<!--              <el-button @click="certificatePic(scope.row)" type="text" size="small">查看</el-button>-->
<!--              &lt;!&ndash;            <el-button type="text" size="small">编辑</el-button>&ndash;&gt;-->
<!--            </template>-->
<!--          </el-table-column>-->

<!--        </el-table>-->
<!--        &lt;!&ndash;        分页&ndash;&gt;-->
<!--        <br/>-->
<!--        <el-pagination-->
<!--          background-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          @current-change="currentChange"-->
<!--          @size-change="sizeChange"-->
<!--          :page-sizes="[5, 10, 20, 40]"-->
<!--          :page-size=size-->
<!--          :current-page=current-->
<!--          :total=total>-->
<!--        </el-pagination>-->
<!--      </el-tab-pane>-->






      <el-tab-pane label="事件" name="eventInfo">
        <el-collapse v-model="activeNames" >
          <el-collapse-item name="1">
            <template slot="title">
              <el-tag type="success">点击新增事件</el-tag>
            </template>

            <el-card class="box-card">
              <el-form :model="eventForm" ref="eventForm" label-width="180px">
                <el-form-item label="事件时间">
                  <el-input v-model="eventForm.sjsj"></el-input>
                </el-form-item>
                <el-form-item label="事件" >
                  <el-input type="textarea" v-model="eventForm.sj"></el-input>
                </el-form-item>
                <el-form-item label="事件级别" >
                  <el-select v-model="eventForm.sjjb" placeholder="请选择事件级别">
                    <el-option label="普通" value="1"></el-option>
                    <el-option label="重要" value="2"></el-option>
                    <el-option label="警告级" value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button @click="saveEvent">新增事件</el-button>
                  <el-button @click="resetEventForm('eventForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>

          </el-collapse-item>
        </el-collapse>


        <el-table
          :data="tableEventData"
          max-height="400"
          height="400"
          :key="Math.random()"
          style="width: 100%">

          <el-table-column
            prop="sjsj"
            label="事件时间"
            width="160">
          </el-table-column>

          <el-table-column
            prop="sj"
            label="事件"
            >
          </el-table-column>

          <el-table-column
            prop="sjjb"
            label="事件级别"
            width="120">
            <template slot-scope="scope">
              <el-tag size="mini" :type="sjjbTag(scope.row.sjjb)" disable-transitions>
                {{sjjbChina(scope.row.sjjb)}}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button @click="delEventPre(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>


<!--      <el-tab-pane label="健康信息" name="healthyInfo">-->
<!--        <el-table-->
<!--          :data="tableHealthyData"-->
<!--          max-height="400"-->
<!--          height="400"-->
<!--          :key="Math.random()"-->
<!--          style="width: 100%">-->

<!--          <el-table-column-->
<!--            prop="jyyy"-->
<!--            label="就医医院"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="jbmc"-->
<!--            label="疾病名称"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="zlyw"-->
<!--            label="治疗药物"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="fssj"-->
<!--            label="发生时间"-->
<!--            width="160">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="jssj"-->
<!--            label="结束时间"-->
<!--            width="160">-->
<!--          </el-table-column>-->


<!--        </el-table>-->
<!--        &lt;!&ndash;        分页&ndash;&gt;-->
<!--        <br/>-->
<!--        <el-pagination-->
<!--          background-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          @current-change="currentChange"-->
<!--          @size-change="sizeChange"-->
<!--          :page-sizes="[5, 10, 20, 40]"-->
<!--          :page-size=size-->
<!--          :current-page=current-->
<!--          :total=total>-->
<!--        </el-pagination>-->
<!--      </el-tab-pane>-->



      <el-tab-pane label="教育情况" name="educationInfo"  >

        <el-collapse v-model="educationActiveNames" >
          <el-collapse-item name="1">
            <template slot="title">
              <el-tag type="success">点击新增</el-tag>
            </template>

            <el-card class="box-card">
              <el-form :model="educationForm" ref="educationForm" label-width="180px">
                <el-form-item label="学校">
                  <el-input v-model="educationForm.xx"></el-input>
                </el-form-item>
                <el-form-item label="是否最高学历" >
                  <el-select style="width: 100%" v-model="educationForm.sfzgxl" placeholder="请选择是否最高学历">
                    <el-option label="最高学历" value="1"></el-option>
                    <el-option label="非最高学历" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="专业班级" >
                  <el-input v-model="educationForm.zybj"></el-input>
                </el-form-item>
                <el-form-item label="学号" >
                  <el-input v-model="educationForm.xh"></el-input>
                </el-form-item>
                <el-form-item label="班级QQ" >
                  <el-input v-model="educationForm.bjqq"></el-input>
                </el-form-item>
                <el-form-item label="班级微信" >
                  <el-input v-model="educationForm.bjwx"></el-input>
                </el-form-item>
                <el-form-item label="宿舍地址" >
                  <el-input v-model="educationForm.ssdz"></el-input>
                </el-form-item>
                <el-form-item label="教育层次" >
                  <el-select style="width: 100%" v-model="educationForm.jycc" placeholder="请选择教育层次">
                    <el-option label="小学" value="1"></el-option>
                    <el-option label="初中" value="2"></el-option>
                    <el-option label="高中" value="3"></el-option>
                    <el-option label="职高" value="4"></el-option>
                    <el-option label="大专" value="5"></el-option>
                    <el-option label="本科" value="6"></el-option>
                    <el-option label="博士" value="7"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="专业" >
                  <el-input v-model="educationForm.zy"></el-input>
                </el-form-item>
                <el-form-item label="门类" >
                  <el-input v-model="educationForm.ml"></el-input>
                </el-form-item>
                <el-form-item label="受教育开始时间" >
                  <el-input v-model="educationForm.sjykssj"></el-input>
                </el-form-item>
                <el-form-item label="教育结束时间" >
                  <el-input v-model="educationForm.sjyjssj"></el-input>
                </el-form-item>
                <el-form-item label="教育状态" >
                  <el-select style="width: 100%" v-model="educationForm.jyzt" placeholder="请选择教育层次">
                    <el-option label="在读" value="1"></el-option>
                    <el-option label="结业" value="2"></el-option>
                    <el-option label="肄业" value="3"></el-option>
                    <el-option label="其他" value="4"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备注" >
                  <el-input type="textarea" v-model="educationForm.bz"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button @click="saveOrUpdEducation">提交</el-button>
                  <el-button @click="educationReset()">重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>

          </el-collapse-item>
        </el-collapse>
        <br/>

        <div  v-for="education in tableEducationData" :key="education.id">
          <el-descriptions border :title="education.xx">
            <template slot="extra">
              <el-button type="primary" size="small" @click="updEducation(education)">编辑</el-button>
              <el-button type="primary" size="small" @click="delEducationTips(education)">删除</el-button>
            </template>
            <el-descriptions-item label="学校">
              <el-tag size="small">{{education.xx}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="是否最高学历">{{sfzgxlChina(education.sfzgxl)}}</el-descriptions-item>
            <el-descriptions-item label="专业班级">{{education.zybj}}</el-descriptions-item>
            <el-descriptions-item label="学号">{{education.xh}}</el-descriptions-item>
            <el-descriptions-item label="班级QQ">{{education.bjqq}}</el-descriptions-item>
            <el-descriptions-item label="班级微信">{{education.bjwx}}</el-descriptions-item>
            <el-descriptions-item label="宿舍地址">{{education.ssdz}}</el-descriptions-item>
            <el-descriptions-item label="教育层次">{{zyccChina(education.jycc)}}</el-descriptions-item>
            <el-descriptions-item label="专业">{{education.zy}}</el-descriptions-item>
            <el-descriptions-item label="门类">{{education.ml}}</el-descriptions-item>
            <el-descriptions-item label="受教育开始时间">{{education.sjykssj}}</el-descriptions-item>
            <el-descriptions-item label="教育结束时间">{{education.sjyjssj}}</el-descriptions-item>
            <el-descriptions-item label="教育状态">{{jyztChina(education.jyzt)}}</el-descriptions-item>
            <el-descriptions-item label="备注">{{education.bz}}</el-descriptions-item>
          </el-descriptions>
          <br/>
        </div>

      </el-tab-pane>



<!--      <el-tab-pane label="任职经历" name="employmentInfo">-->
<!--        <el-table-->
<!--          :data="tableWorkExperienceData"-->
<!--          max-height="400"-->
<!--          height="400"-->
<!--          :key="Math.random()"-->
<!--          style="width: 100%">-->

<!--          <el-table-column-->
<!--            prop="jgmc"-->
<!--            label="公司或机构名称"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="tyxydm"-->
<!--            label="统一信用代码"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="dz"-->
<!--            label="地址"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="hy"-->
<!--            label="行业"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="xc"-->
<!--            label="薪酬"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="rzlx"-->
<!--            label="任职类型"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="dwlx"-->
<!--            label="机构或公司类型"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="kssj"-->
<!--            label="开始时间"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="jssj"-->
<!--            label="结束时间"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="lzyy"-->
<!--            label="离职原因"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="bz"-->
<!--            label="备注"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--        </el-table>-->
<!--        &lt;!&ndash;        分页&ndash;&gt;-->
<!--        <br/>-->
<!--        <el-pagination-->
<!--          background-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          @current-change="currentChange"-->
<!--          @size-change="sizeChange"-->
<!--          :page-sizes="[5, 10, 20, 40]"-->
<!--          :page-size=size-->
<!--          :current-page=current-->
<!--          :total=total>-->
<!--        </el-pagination>-->
<!--      </el-tab-pane>-->


      <el-tab-pane label="照片" name="userPhotoInfo" style="min-height: 400px">

<!--        <el-input v-model="userPhotoData" placeholder="请输入图片备注"></el-input>-->

        <el-upload
          :action="userPhotoPath"
          :drag="isFalse"
          :auto-upload="isTrue"
          :file-list="fileList"
          :data="userPhotoData"
          list-type="picture-card"
          :on-preview="userPhotoPreview"
          :on-success="onSuccess"
          :on-progress="onProgress"
          :on-error="onError"
          :before-upload="beforeUpload"
          :before-remove="beforeRemove"
          :on-remove="userPhotoRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
<!--        图片展示-->
        <el-dialog :visible.sync="userPhotoShow" :append-to-body="isTrue">
          <img width="100%" :src="userPhotoUrl" :alt="userPhotoAlt">
          <el-link type="primary">{{userPhotoAlt}}</el-link>
        </el-dialog>


<!--        <el-upload-->
<!--          :action="userPhotoPath"-->
<!--          list-type="picture-card"-->
<!--          :on-preview="userPhotoPreview"-->
<!--          :on-remove="userPhotoRemove">-->
<!--          <i class="el-icon-plus"></i>-->
<!--        </el-upload>-->
<!--        <el-dialog :visible.sync="userPhotoShow">-->
<!--          <img width="100%" :src="userPhotoUrl" alt="">-->
<!--        </el-dialog>-->



<!--        <div style="float:left;"  v-for="obj of tableUserPhotoData">-->
<!--          <el-row>-->
<!--            <el-col :span="24">-->
<!--              <el-image style="width: 300px;height: 320px; "-->
<!--                        :src="read(obj.zplj)" fit="scale-down"-->
<!--              ></el-image>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row>-->
<!--            <el-col :span="24">-->
<!--              <el-button type="primary" plain @click="delUserPhoto(obj.id)" >删除</el-button>-->
<!--              <span class="demonstration">{{ obj.sj }} - {{ obj.zpsm }}</span>-->
<!--            </el-col>-->
<!--          </el-row>-->

<!--        </div>-->

      </el-tab-pane>



<!--      <el-tab-pane label="固定资产" name="fixedAssetsInfo">-->
<!--        <el-table-->
<!--          :data="tableFixedAssetsData"-->
<!--          max-height="400"-->
<!--          height="400"-->
<!--          :key="Math.random()"-->
<!--          style="width: 100%">-->

<!--          <el-table-column-->
<!--            prop="lx"-->
<!--            label="固定资产类型"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="zcqk"-->
<!--            label="资产情况"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="bz"-->
<!--            label="备注"-->
<!--            width="420">-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--        &lt;!&ndash;        分页&ndash;&gt;-->
<!--        <br/>-->
<!--        <el-pagination-->
<!--          background-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          @current-change="currentChange"-->
<!--          @size-change="sizeChange"-->
<!--          :page-sizes="[5, 10, 20, 40]"-->
<!--          :page-size=size-->
<!--          :current-page=current-->
<!--          :total=total>-->
<!--        </el-pagination>-->
<!--      </el-tab-pane>-->



      <el-tab-pane label="账号信息" name="accountInfo"  >

        <el-collapse v-model="accountActiveNames" >
          <el-collapse-item name="1">
            <template slot="title">
              <el-tag type="success">点击新增</el-tag>
            </template>

            <el-card class="box-card">
              <el-form :model="accountForm" ref="accountForm" label-width="180px">
                <el-form-item label="证件账号名称">
                  <el-input v-model="accountForm.zjzhmc"></el-input>
                </el-form-item>
                <el-form-item label="账号">
                  <el-input v-model="accountForm.zh"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input v-model="accountForm.mm"></el-input>
                </el-form-item>
                <el-form-item label="密保">
                  <el-input v-model="accountForm.mb"></el-input>
                </el-form-item>
                <el-form-item label="URL">
                  <el-input v-model="accountForm.url"></el-input>
                </el-form-item>
                <el-form-item label="重要程度" >
                  <el-select style="width: 100%" v-model="accountForm.zycd" placeholder="请选择是否最高学历">
                    <el-option label="核心" value="1"></el-option>
                    <el-option label="关键" value="2"></el-option>
                    <el-option label="普通" value="3"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-button @click="saveOrUpdAccount">提交</el-button>
                  <el-button @click="accountReset()">重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>

          </el-collapse-item>
        </el-collapse>
        <br/>

        <el-table
          :data="tableAccountData"
          max-height="400"
          height="400"
          :key="Math.random()"
          style="width: 100%">

          <el-table-column
            prop="zjzhmc"
            label="证件账号名称"
            width="160">
          </el-table-column>

          <el-table-column
            prop="zh"
            label="账号"
            width="180">
          </el-table-column>

          <el-table-column
            prop="mm"
            label="密码"
            width="160">
          </el-table-column>

          <el-table-column
            prop="mb"
            label="密保"
            >
          </el-table-column>

          <el-table-column
            prop="url"
            label="URL"
            >
          </el-table-column>

          <el-table-column
            prop="zycd"
            label="重要程度"
            width="120">
            <template slot-scope="scope">
              <el-tag size="mini" :type="sfzyzhTag(scope.row.sfzyzh)" disable-transitions>
                {{sfzyChina(scope.row.sfzyzh)}}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button @click="updAccount(scope.row)" type="text" size="small">修改</el-button>
              <el-button @click="accountPre(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>


        </el-table>

      </el-tab-pane>





<!--      <el-tab-pane label="银行信息" name="bankInfo">-->
<!--        <el-table-->
<!--          :data="tableBankData"-->
<!--          max-height="400"-->
<!--          height="400"-->
<!--          :key="Math.random()"-->
<!--          style="width: 100%">-->

<!--          <el-table-column-->
<!--            prop="yhmc"-->
<!--            label="银行名称"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="yhkh"-->
<!--            label="银行卡号"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="khhszd"-->
<!--            label="开户行所在地"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="khsj"-->
<!--            label="开户时间"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="kzt"-->
<!--            label="卡状态"-->
<!--            width="120">-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--            prop="bz"-->
<!--            label="备注"-->
<!--            width="120">-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--        &lt;!&ndash;        分页&ndash;&gt;-->
<!--        <br/>-->
<!--        <el-pagination-->
<!--          background-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          @current-change="currentChange"-->
<!--          @size-change="sizeChange"-->
<!--          :page-sizes="[5, 10, 20, 40]"-->
<!--          :page-size=size-->
<!--          :current-page=current-->
<!--          :total=total>-->
<!--        </el-pagination>-->
<!--      </el-tab-pane>-->


    </el-tabs>

    <PhotoCertificatesDetails
    :tableCertificatesPhotoData="tableCertificatesPhotoData"
    :dialogTableVisible="dialogTableVisible"
    @dialogTableVisibleClose="dialogTableVisibleClose"
    ></PhotoCertificatesDetails>
  </div>

</template>

<script>

  import http from '@/utils/http'
  import {checkNull, readImages, setObjNull} from '@/utils/utils'
  import {USER_PHOTO_URL} from '@/config/config'
  import PhotoCertificatesDetails from './PhotoCertificatesDetails'
  // import WaterfallImages from './WaterfallImages'


  export default {
    name: "UserDetails",
    props:{
      rowData: Object,
      userDetailedFormVisible: Boolean,
    },
    components: {
      PhotoCertificatesDetails,
      // WaterfallImages,
    },
    data(){
      return {
        isTrue: true,
        isFalse: false,
        // 总共多少页
        total: 0,
        // 显示第几页
        current: 1,
        // 每页显示的数量
        size: 10,
        // 默认选中打开的配置
        activeName: 'baseInfo',
        // 当前打开的页面
        openPage: null,
        // 账号信息列表
        tableAccountData: [],
        // 固定资产列表
        tableFixedAssetsData: [],
        // 银行列表
        tableBankData: [],
        // 证件信息
        tableCertificatesData: [],
        // 证件照片
        tableCertificatesPhotoData: [],
        // 人员关系
        tableContactData: [],
        // 教育情况
        tableEducationData: [],
        // 事件
        tableEventData: [],
        // 健康信息
        tableHealthyData: [],
        // 婚姻情况
        tableMarriageData: [],
        // 人员照片
        tableUserPhotoData: [],
        // 任职经历
        tableWorkExperienceData: [],
        // 基础信息展示几列
        descriptionsColumn: 2,
        // 头像地址
        imagesHead: null,
        // 证件照片的详情
        dialogTableVisible: false,
        // 用户照片上传点击放大展示
        userPhotoUrl: '',
        // 用户照片上传点击放大展示-它规定在图像无法显示时的替代文本
        userPhotoAlt: '',
        // 用户照片上传弹框-是否显示
        userPhotoShow: false,
        // 用户照片上传地址
        userPhotoPath: USER_PHOTO_URL + this.rowData.id,
        // 上传时附带的额外参数
        userPhotoData: null,
        // 上传的文件列表，上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
        fileList: [],
        // 事件新增的折叠面板打开哪个
        activeNames: [''],
        // 教育信息新增的折叠面板打开哪个
        educationActiveNames: [''],
        // 账号信息新增折叠面板打开哪一个
        accountActiveNames: [''],
        // 事件提交参数
        eventForm: {
          ryId: this.rowData.id,
          sjsj: '',
          sj: '',
          sjjb: '',
        },
        // 教育提交参数
        educationForm: {
          id: '',
          ryId: this.rowData.id,
          xx: '',
          sfzgxl: null,
          zybj: '',
          xh: '',
          bjqq: '',
          bjwx: '',
          ssdz: '',
          jycc: '',
          zy: '',
          ml: '',
          sjykssj: '',
          sjyjssj: '',
          jyzt: '',
          bz: '',
        },
        // 账号提交信息
        accountForm: {
          id: '',
          ryId: this.rowData.id,
          zjzhmc: '',
          zh: '',
          mm: '',
          mb: '',
          url: '',
          zycd: '',
        },
      }
    },
    methods: {
      /**
       * 读取照片
       * @param path
       * @return {*}
       */
      read(path){
        // 照片路径为空，则展示默认图片
        if (checkNull(path)) {
          return path;
        } else {
          return readImages(path)
        }
      },
      /**
       * 关闭弹框的回调-证件图片详情
       */
      dialogTableVisibleClose(){
        this.dialogTableVisible = false
      },
      /**
       * 证件详情-图片信息
       */
      certificatePic(data){
        this.tableCertificatesPhotoData = data.certificatesPhotoList
        this.dialogTableVisible = true
      },
      /**
       * 当前页被改变的时候
       * @param val 当前页
       */
      currentChange: function (val) {
        this.current = val;
        this.selectOpenPage()
      },
      /**
       * 每页数量被改变的时候
       * @param val 每页显示数量
       */
      sizeChange: function (val) {
        this.size = val;
        this.selectOpenPage()
      },
      /**
       * 重置分页数量
       */
      resetPage(){
        this.total = 0
        this.current = 1
        this.size = 10
      },
      /**
       * 保存事件
       */
      saveEvent(){
        http.post("/meteorological/event/saveEvent", this.eventForm).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }
          this.getEventAll()
          this.$message({
            type: 'success',
            message: '添加成功'
          });
          this.resetEventForm()
          this.activeNames = ['']

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 保存修改账号信息
       */
      saveOrUpdAccount(){
        let url;
        if (this.accountForm.id){
          url = "/meteorological/account/updAccountPassword"
        } else {
          url = "/meteorological/account/saveAccountPassword"
        }

        http.post(url, this.accountForm).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }
          this.getAccountPasswordAll()
          this.$message({
            type: 'success',
            message: res.msg
          });
          this.accountReset()
          // 关上添加页
          this.accountActiveNames = ['']

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 保存教育情况
       */
      saveOrUpdEducation(){
        let url;
        if (this.educationForm.id){
          url = "/meteorological/education/updEducation"
        } else {
          url = "/meteorological/education/saveEducation"
        }

        http.post(url, this.educationForm).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }
          this.getEducationAll()
          this.$message({
            type: 'success',
            message: res.msg
          });
          this.educationReset()
          // 关上添加页
          this.educationActiveNames = ['']

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 更新教育情况
       * @param education
       */
      updEducation(education){
        this.educationForm = education;
        // 打开修改页面
        this.educationActiveNames = ['1']
      },
      /**
       * 根据ID删除教育情况-提示
       * @param education
       */
      delEducationTips(education){
        this.$confirm('确认删除教育信息吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          this.delEducation(education)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /**
       * 根据ID删除教育情况-提示
       * @param education
       */
      delEducation(education){
        http.post("/meteorological/education/delEducation", {id: education.id}).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }
          this.getEducationAll()
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.educationReset()
          // 关上添加页
          this.educationActiveNames = ['']

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 更新账号信息，信息回显
       */
      updAccount(account){
        this.accountForm = account;
        // 打开修改页面
        this.accountActiveNames = ['1']
      },
      /**
       * 根据ID删除账号信息-提示
       * @param account 账号信息
       */
      accountPre(account){
        this.$confirm('确认删除账号信息吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          this.delAccount(account)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /**
       * 根据ID删除账号信息-提示
       * @param account
       */
      delAccount(account){
        http.post("/meteorological/account/delAccountPassword", {id: account.id}).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }
          this.getAccountPasswordAll()
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.accountReset()
          // 关上添加页
          this.accountActiveNames = ['']

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 重置事件添加表单
       * @param formName
       */
      resetEventForm(formName){
        // this.eventForm.sjjb = null;
        // this.eventForm.sj = null;
        // this.eventForm.sjsj = null;
        setObjNull(this.eventForm);
        this.eventForm.ryId = this.rowData.id
      },
      /**
       * 重置教育添加
       */
      educationReset(){
        setObjNull(this.educationForm);
        this.educationForm.ryId = this.rowData.id
      },
      /**
       * 重置账号添加
       */
      accountReset(){
        setObjNull(this.accountForm);
        this.accountForm.ryId = this.rowData.id
      },
      /**
       * 选择打开的页面
       */
      selectOpenPage(){
        if (this.openPage === 'accountInfo'){
          this.findAccountPage()
        } else if (this.openPage === 'fixedAssetsInfo'){
          this.findFixedAssetPage()
        } else if (this.openPage === 'bankInfo'){
          this.findBankPage()
        } else if (this.openPage === 'certificateInfo'){
          this.findCertificatesPage()
        } else if (this.openPage === 'photoCertificates'){
          this.findCertificatesPhotoPage()
        } else if (this.openPage === 'socialRelation'){
          this.findContactPage()
        } else if (this.openPage === 'educationInfo'){
          this.getEducationAll()
        } else if (this.openPage === 'eventInfo'){
          this.getEventAll()
        } else if (this.openPage === 'healthyInfo'){
          this.findHealthyPage()
        } else if (this.openPage === 'baseInfo'){
          // 婚姻
          // this.findMarriagePage()
        } else if (this.openPage === 'userPhotoInfo'){
          this.getPictureAll()
        } else if (this.openPage === 'employmentInfo'){
          this.findWorkExperiencePage()
        }
      },
      /**
       * 教育层次转中文
       * @param item
       */
      zyccChina(item){
        if (item === 1){
          return '小学'
        } else if (item === 2){
          return '初中'
        } else if (item === 3){
          return '高中'
        } else if (item === 4){
          return '职高'
        } else if (item === 5){
          return '大专'
        } else if (item === 6){
          return '本科'
        } else if (item === 7){
          return '博士'
        } else {
          return ''
        }
      },
      /**
       * 教育状态转中文
       * @param item
       */
      jyztChina(item){
        if (item === 1){
          return '在读'
        } else if (item === 2){
          return '结业'
        } else if (item === 3){
          return '肄业'
        } else if (item === 4){
          return '其他'
        } else {
          return ''
        }
      },
      /**
       * 是否最高学历转中文
       * @param item
       */
      sfzgxlChina(item){
        if (item === 1){
          return '是'
        } else if (item === 2){
          return '否'
        } else {
          return ''
        }
      },
      /**
       * 点击标签页触发的事件
       * @param tab 哪一个table页，table页信息
       * @param event 事件
       */
      handleClick(tab, event) {
        this.openPage = tab.name
        this.selectOpenPage();
      },
      /**
       * 分页查询任职经历
       */
      findWorkExperiencePage(){
        http.post("/meteorological/subsidiary/findWorkExperiencePage", {
          // 分页参数
          current: this.current,
          size: this.size,
          // 查询参数
          ryid: this.rowData.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }

          let data = res.data;
          this.total = data.total;
          this.current = data.current;
          this.size = data.size;
          // 处理数据
          this.tableWorkExperienceData = data.records;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 查询人员照片
       */
      getPictureAll(){
        http.post("/meteorological/pic/getPictureAll", {
          ryId: this.rowData.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }

          let data = res.data
          if (data == null){
            return null;
          }

          // 图片进行转换
          let arrayObject = []
          for (let image of data){
            let obj = {'name': image.sm,
              'id': image.id,
              'ryId': image.ryId,
              'url': readImages(image.zplj)};
            arrayObject.push(obj)
          }
          this.fileList = arrayObject;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 分页查询婚姻情况
       */
      findMarriagePage(){
        http.post("/meteorological/subsidiary/findMarriagePage", {
          // 分页参数
          current: this.current,
          size: 100,
          // 查询参数
          ryid: this.rowData.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }

          let data = res.data;
          this.total = data.total;
          this.current = data.current;
          this.size = data.size;
          // 处理数据
          this.tableMarriageData = data.records;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 分页查询健康信息
       */
      findHealthyPage(){
        http.post("/meteorological/subsidiary/findHealthyPage", {
          // 分页参数
          current: this.current,
          size: this.size,
          // 查询参数
          ryid: this.rowData.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }

          let data = res.data;
          this.total = data.total;
          this.current = data.current;
          this.size = data.size;
          // 处理数据
          this.tableHealthyData = data.records;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 根据人员查询全部教育信息
       */
      getAccountPasswordAll(){
        http.post("/meteorological/account/getAccountPasswordAll", {
          // 查询参数
          ryId: this.rowData.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }
          // 处理数据
          this.tableAccountData = res.data;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 根据人员查询全部教育信息
       */
      getEducationAll(){
        http.post("/meteorological/education/getEducationAll", {
          // 查询参数
          ryId: this.rowData.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }
          // 处理数据
          this.tableEducationData = res.data;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 查询全部事件
       */
      getEventAll(){
        http.post("/meteorological/event/getEventAll", {
          // 分页参数
          current: this.current,
          size: this.size,
          // 查询参数
          ryId: this.rowData.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }

          // 处理数据
          this.tableEventData = res.data;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 分页查询人员关系
       */
      findContactPage(){
        http.post("/meteorological/subsidiary/findContactPage", {
          // 分页参数
          current: this.current,
          size: this.size,
          // 查询参数
          ryid: this.rowData.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }

          let data = res.data;
          this.total = data.total;
          this.current = data.current;
          this.size = data.size;
          // 处理数据
          this.tableContactData = data.records;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 分页查询证件照片
       */
      findCertificatesPhotoPage(){
        http.post("/meteorological/subsidiary/findCertificatesPhotoPage", {
          // 分页参数
          current: this.current,
          size: this.size,
          // 查询参数
          ryid: this.rowData.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }

          let data = res.data;
          this.total = data.total;
          this.current = data.current;
          this.size = data.size;
          // 处理数据
          this.tableCertificatesData = data.records;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 分页查询证件信息
       */
      findCertificatesPage(){
        http.post("/meteorological/subsidiary/findCertificatesPage", {
          // 分页参数
          current: this.current,
          size: this.size,
          // 查询参数
          ryid: this.rowData.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }

          let data = res.data;
          this.total = data.total;
          this.current = data.current;
          this.size = data.size;
          // 处理数据
          this.tableCertificatesData = data.records;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 分页查询银行信息
       */
      findBankPage(){
        http.post("/meteorological/subsidiary/findBankPage", {
          // 分页参数
          current: this.current,
          size: this.size,
          // 查询参数
          ryid: this.rowData.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }

          let data = res.data;
          this.total = data.total;
          this.current = data.current;
          this.size = data.size;
          // 处理数据
          this.tableBankData = data.records;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 分页查询固定资产
       */
      findFixedAssetPage(){
        http.post("/meteorological/subsidiary/findFixedAssetPage", {
          // 分页参数
          current: this.current,
          size: this.size,
          // 查询参数
          ryid: this.rowData.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }

          let data = res.data;
          this.total = data.total;
          this.current = data.current;
          this.size = data.size;
          // 处理数据
          this.tableFixedAssetsData = data.records;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 点击文件列表中已上传的文件时的钩子-用户照片
       * 图片预览展示
       * @param file 上传的文件
       */
      userPhotoPreview(file) {
        console.log("点击文件列表中已上传的文件时的钩子")
        console.log(file)
        this.userPhotoUrl = file.url;
        this.userPhotoAlt = file.sm
        this.userPhotoShow = true;
        // this.getPictureAll()
      },
      /**
       * 文件上传成功时的钩子
       * @param response
       * @param file
       * @param fileList
       */
      onSuccess(response, file, fileList){
        console.log("文件上传成功时的钩子")
      },
      /**
       * 文件上传时的钩子
       * @param event
       * @param file
       * @param fileList
       */
      onProgress(event, file, fileList){
        console.log("文件上传时候的钩子")
        console.log(event)
        console.log(file)
        console.log(fileList)
      },
      /**
       * 覆盖默认的上传行为，可以自定义上传的实现
       */
      imagesHttpRequest(){

      },
      /**
       * 文件上传失败时的钩子
       * @param err
       * @param file
       * @param fileList
       */
      onError(err, file, fileList){
        console.log("上传错误的钩子")
        console.log(file)
        console.log(err)
        console.log(fileList)
      },
      /**
       * 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
       * @param file
       */
      beforeUpload(file){
        console.log("上传前的钩子")
        console.log(file)
      },
      /**
       * 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除
       * @param file
       * @param fileList
       */
      beforeRemove(file, fileList){
        console.log("删除文件之前的钩子")
        this.delUserPhoto(file.id)
      },
      /**
       * 用户照片点击删除的时候
       * @param file
       * @param fileList
       */
      userPhotoRemove(file, fileList) {
        console.log("点击删除的钩子")
        // this.getPictureAll()
      },
      /**
       * 根据主键删除人员照片
       * @param id 用户图片id
       */
      delUserPhoto(id){
        http.post("/meteorological/pic/delPic", {
          // 查询参数
          id: id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }

          // this.getPictureAll()
          this.$message({
            type: 'success',
            message: '删除图片成功'
          });

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 图片转换,如果头像路径为空，则展示默认图片
       * @param path 头像路径
       * @param sex 性别代码
       * @return 最终的图片路径
       */
      icoTransformation(path, sex) {
        // 照片路径为空，则展示默认图片
        if (checkNull(path)) {
          if (sex === 2) {
            path = require("@/assets/images/touXiang-nv.png");
          } else if (sex === 1) {
            path = require("@/assets/images/touXiang-nan.png");
          } else {
            // 如果没有默认图片，则使用默认的图片，引用图片必须使用 require
            path = require("@/assets/images/touXiang-zhongXing.png");
          }
          return path;

        } else {
          return readImages(path)
        }
      },
      /**
       * 户口类型状态标签
       * @param item 状态代码
       * @return {string}
       */
      hklxTransformationTag(item){
        if (item === 1){
          return ''
        } else {
          return 'success'
        }
      },
      /**
       * 删除事件-前置任务
       * @param row
       */
      delEventPre(row){
        this.$confirm('确认删除事件吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          this.delEvent(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /**
       * 删除事件
       * @param row
       */
      delEvent(row){
        http.post("/meteorological/event/delEvent", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getEventAll()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 户口类型状态代码转中文
       * @param item 代码
       * @return {string}
       */
      hklxTransformationChina(item){
        if (item === 2){
          return '农村户口'
        } else if (item === 1){
          return '城镇户口'
        }else {
          return '未知'
        }
      },
      /**
       * 人员状态标签
       * @param item 状态代码
       * @return {string}
       */
      ryztTransformationTag(item){
        if (item === 1){
          return 'info'
        } else {
          return ''
        }
      },
      /**
       * 人员状态代码转中文
       * @param item 代码
       * @return {string}
       */
      ryztTransformationChina(item){
        if (item === 2){
          return '离世'
        } else {
          return '在世'
        }
      },
      /**
       * 性别标签颜色
       * @param item 数据源状态代码
       * @return {string} 颜色
       */
      sexTransformationTag(item){
        if (item === 1){
          return 'success'
        } else if (item === 2){
          return ""
        } else {
          return 'info'
        }
      },
      /**
       * 性别转换为中文
       * @param item 数据源状态代码
       * @return {string} 中文状态
       */
      sexTransformationChina(item){
        if (item === 1){
          return '男'
        } else if (item === 2){
          return "女"
        } else {
          return '未知'
        }
      },
      /**
       * 婚姻状态标签颜色
       * @param item 数据源状态代码
       * @return {string} 颜色
       */
      hyztTag(item){
        if (item === 0){
          return 'warning'
        } else if (item === 2){
          return "info"
        } else {
          return 'success'
        }
      },
      /**
       * 事件级别
       * @param item
       * @return {string}
       */
      sjjbTag(item){
        if (item === 2){
          return 'warning'
        } else if (item === 3){
          return "info"
        } else {
          return 'success'
        }
      },
      /**
       * 证件有效性
       * @param item
       * @return {string}
       */
      zjyxTag(item){
        if (item === 1){
          return ''
        } else {
          return 'success'
        }
      },
      /**
       * 是否重要证件
       * @param item
       * @return {string}
       */
      sfzyzhTag(item){
        if (item === 1){
          return ''
        } else if (item === 2) {
          return 'warning'
        } else {
          return 'success'
        }
      },
      /**
       * 是否重要证件
       * @param item
       * @return {string}
       */
      sfzyChina(item){
        if (item === 1){
          return '核心'
        } else if (item === 2) {
          return '关键'
        } else {
          return '普通'
        }
      },
      /**
       * 账号状态
       * @param item
       * @return {string}
       */
      zhztTag(item){
        if (item === 1){
          return ''
        } else {
          return 'success'
        }
      },
      /**
       * 账号状态
       * @param item
       * @return {string}
       */
      zhztChina(item){
        if (item === 1){
          return '使用'
        } else {
          return '停用'
        }
      },
      /**
       * 证件有效性
       * @param item
       * @return {string}
       */
      zjyxChina(item){
        if (item === 1){
          return '有效'
        } else {
          return '无效'
        }
      },
      /**
       * 婚姻状态转换为中文
       * @param item 数据源状态代码
       * @return {string} 中文状态
       */
      hyztTransformationChina(item){
        if (item === 0){
          return '分居'
        } else if (item === 2){
          return "离异"
        } else {
          return '存续'
        }
      },
      /**
       * 事件级别转换为中文
       * @param item 数据源状态代码
       * @return {string} 中文状态
       */
      sjjbChina(item){
        if (item === 1){
          return '普通'
        } else if (item === 2){
          return "重要"
        } else {
          return '警告级'
        }
      },
    },
    watch: {
      /**
       * 监听打开事件,从而渲染地区的下拉框
       * @param show 当前的值
       */
      userDetailedFormVisible: {
        immediate: true,
        handler(show) {
          this.imagesHead = this.icoTransformation(this.rowData.zp, this.rowData.xb)
          this.resetPage()
          this.openPage = 'baseInfo'
          this.selectOpenPage()
        }
      },
    },
  }
</script>

<style scoped>

  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }

</style>
